<template>
    <div class="wrap">
        <div class="page-head">
            <a-breadcrumb>
                <a-breadcrumb-item>{{ $t('spectLog.spectLog.60zekq5nv2g0') }}</a-breadcrumb-item>
                <a-breadcrumb-item>{{ $t('spectLog.spectLog.60zekq5nw540') }}</a-breadcrumb-item>
            </a-breadcrumb>
        </div>
        <c-table-search @refresh="getData" :loading="form.loading" v-model:model="form.data">
            <a-col :span="8">
                <a-form-item field="keywords" :label="$t('user.user.60zemoh0p680')">
                    <a-input v-model="form.data.keywords" :placeholder="$t('user.user.60zemoh0pbk0')" />
                </a-form-item>
            </a-col>
            <a-col :span="8">
                <a-form-item field="value4" :label="$t('spectLog.spectLog.60zekq5nwi40')">
                    <a-range-picker :model-value="[form.data.startTime, form.data.endTime]"
                        style="width: 360px; margin: 0 24px 24px 0;" show-time format="YYYY-MM-DD HH:mm" @change="form.data.startTime = Number($event?.[0]);
                        form.data.endTime = Number($event?.[1])" value-format="x" />
                </a-form-item>
            </a-col>
            <template v-slot:refresh>
                <a-button type="outline" @click="refresh">
                    <template #icon>
                        <icon-loop />
                    </template>
                </a-button>
            </template>
        </c-table-search>
        <div class="table-scroll">
            <c-table @refresh="getData" :list="form.list" :loading="form.loading" :count="form.count"
                v-model:data="form.data">
                <a-table-column :title="$t('spectLog.spectLog.60zekq5nwo80')" ellipsis tooltip :width="70">
                    <template #cell="{ rowIndex }">
                        {{ rowIndex + 1 }}
                    </template>
                </a-table-column>
                <a-table-column :title="$t('spectLog.spectLog.60zekq5nws00')" ellipsis tooltip :width="100">
                    <template #cell="{ record }">
                        <div class="name">
                            <span>{{ useIdModelFormat(record.uavId).name }}</span>
                            <!-- <span v-if="record.uavType === 1">{{ $t('spectLog.spectLog.60zekq5nwws0') }}</span>
                            <span v-else-if="record.uavType === 2">{{ $t('spectLog.spectLog.60zekq5nx3w0') }}</span>
                            <span v-else-if="record.uavType === 3">{{ $t('spectLog.spectLog.60zekq5nx8g0') }}</span>
                            <span v-else-if="record.uavType === 4">{{ $t('spectLog.spectLog.60zekq5nxh00') }}</span>
                            <span v-else-if="record.uavType === 5">{{ $t('spectLog.spectLog.60zekq5nxn80') }}</span>
                            <span v-else-if="record.uavType === 6">{{ $t('spectLog.spectLog.60zekq5nxs80') }}</span>
                            <span v-else-if="record.uavType === 7">{{ $t('spectLog.spectLog.60zekq5nxx40') }}</span>
                            <span v-else-if="record.uavType === 8">{{ $t('spectLog.spectLog.60zekq5ny200') }}</span>
                            <span v-else-if="record.uavType === 9">{{ $t('spectLog.spectLog.60zekq5ny7k0') }}</span>
                            <span v-else>{{ $t('spectLog.spectLog.60zekq5nyb80') }}</span> -->
                        </div>
                    </template>
                </a-table-column>
                <a-table-column title="UASID" ellipsis tooltip :width="180">
                    <template #cell="{ record }">
                        {{ record.uavId ? record.uavId : '-' }}
                    </template>
                </a-table-column>
                <a-table-column :title="$t('spectLog.spectLog.60zekq5nyj40')" ellipsis tooltip :width="280">
                    <template #cell="{ record }">
                        {{ record.lng }},{{ record.lat }}
                    </template>
                </a-table-column>
                <a-table-column :title="$t('spectLog.spectLog.60zekq5nym40')" ellipsis tooltip :width="120">
                    <template #cell="{ record }">
                        <a-tag color="#f53f3f" v-if="record.riskAreaId === 0">{{ $t('spectLog.spectLog.60zekq5nypg0')
                            }}</a-tag>
                        <a-tag color="#00b42a" v-else>{{ $t('spectLog.spectLog.60zekq5nytk0') }}</a-tag>
                    </template>
                </a-table-column>
                <a-table-column :title="$t('spectLog.spectLog.60zekq5nyw00')" ellipsis tooltip :width="200">
                    <template #cell="{ record }">
                        <div class="status">
                            <a-tag v-if="record.status === 1">{{ $t('components.log.60ze0pa83bw2') }}</a-tag>
                            <a-tag v-else-if="record.status === 2">{{ $t('components.log.60ze0pa83bw3') }}</a-tag>
                            <a-tag v-else-if="record.status === 3">{{ $t('components.log.60ze0pa83bw4') }}</a-tag>
                            <a-tag v-else-if="record.status === 4">{{ $t('components.log.60ze0pa83bw5') }}</a-tag>
                            <a-tag v-else-if="record.status === 5">{{ $t('components.log.60ze0pa83bw6') }}</a-tag>
                            <a-tag v-else-if="record.status === 9">{{ $t('components.log.60ze0pa83bw7') }}</a-tag>
                            <a-tag v-else-if="record.status === 11">{{ $t('components.log.60ze0pa83bw8') }}</a-tag>
                            <a-tag v-else>{{ $t('components.log.60zdun8pj7k0') }}</a-tag>
                        </div>
                    </template>
                </a-table-column>
                <a-table-column :ellipsis="true" :title="$t('spectLog.spectLog.60zekq5nzio0')" :width="240">
                    <template #cell="{ record }">
                        {{ record.createTime ? dayjs.unix(record.createTime).format('YYYY-MM-DD HH:mm:ss') : '-' }}
                    </template>
                </a-table-column>
            </c-table>
        </div>
    </div>
</template>

<script lang='ts' setup>
import { apiSpectLogList } from '@/api/log'
import { useIdModelFormat } from "@/hooks/comparison";
import dayjs from 'dayjs'
const local = useLocal()
const emit = defineEmits(['refresh'])
const refresh = () => {
    emit('refresh')
}
// const switchColor = ref(false);
const form = reactive({
    data: {
        page: 1,
        pageSize: 20,
        keywords: '',
        uid: local.usermsg.id == 3 ? 0 : local.usermsg.id,
        startTime: dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'),
        endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
    } as any,
    loading: false,
    list: [],
    count: 0
})
// 选择时间
// const onOk = (dateString: any, date: any) => {
//     console.log('onOk: ', dateString, date)
// }
// 无人机日志列表
const getData = async () => {
    form.loading = true
    const { code, data } = await apiSpectLogList({
        ...form.data,
        startTime: Number(dayjs(form.data.startTime).format('X')),
        endTime: Number(dayjs(form.data.endTime).format('X')),
        keywords: form.data.keywords
    })
    form.loading = false
    if (code != 200) return;
    form.list = data.list
    form.count = data.total
}
onBeforeMount(() => {
    getData()
    local.getdroneOPeratorList()
})
</script>

<style scoped lang="less"></style>